<template>
	<div class="container">
		<div v-if="recommendVideos.length > 0" class="recommend-section">
			<div class="section-header">
				<h3 class="section-title">推荐视频</h3>
				<el-button type="primary" icon="RefreshRight" :loading="refreshing" @click="refreshRecommendations"> 换一换 </el-button>
			</div>
			<div class="recommend-grid">
				<div v-for="video in recommendVideos" :key="video.id" class="recommend-card" @click="handleRecommendClick(video)">
					<div class="image-container">
						<el-image :src="video.img" class="recommend-image" fit="contain">
							<template #error>
								<div class="image-error">加载失败</div>
							</template>
						</el-image>
					</div>
					<div class="recommend-title">{{ video.name }}</div>
					<div class="hover-overlay"></div>
				</div>
			</div>
		</div>

		<div class="content-container">
			<div v-if="tableData.length > 0" class="rich-content" v-html="tableData[0].content"></div>
		</div>
	</div>
</template>

<script setup>
import settings from '@/utils/settings'
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { useRouter } from 'vue-router'

const router = useRouter()
const tableData = ref([])
const recommendVideos = ref([])
const refreshing = ref(false)
const lastRefreshTime = ref(Date.now())

const load = async () => {
	const res = await request.get('/homepage/page', {
		params: {
			state: 1,
			pageSize: 100
		}
	})
	tableData.value = res.data.records.filter(item => item.state === 1)
}

const loadRecommendations = async (force = false) => {
	try {
		refreshing.value = true
		const timestamp = force ? Date.now() : lastRefreshTime.value
		const res = await request.get('/video/personalRecommend', {
			params: {
				_t: timestamp
			}
		})
		recommendVideos.value = res.data
		lastRefreshTime.value = Date.now()
	} catch (error) {
		console.error('获取推荐失败:', error)
	} finally {
		refreshing.value = false
	}
}

const refreshRecommendations = () => {
	loadRecommendations(Date.now())
}

const handleRecommendClick = async video => {
	try {
		await request.post(`/video/recordHistory/${video.id}`)
		router.push(`/front/video/detail?id=${video.id}`)
	} catch (error) {
		console.error('记录历史失败:', error)
	}
}

onMounted(async () => {
	await load()
	await loadRecommendations(true)
})
</script>

<style scoped lang="scss">
.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
}

.rich-content {
	max-width: 1200px;
	width: 100%;
	padding: 30px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	margin: 0 auto;

	:deep(img) {
		max-width: 100%;
		height: auto;
		margin: 10px 0;
		border-radius: 4px;
	}

	:deep(p) {
		font-size: 16px;
		line-height: 1.8;
		color: #333;
		margin: 10px 0;
	}

	:deep(h1),
	:deep(h2),
	:deep(h3) {
		color: #2c3e50;
		margin: 20px 0;
	}
}

.recommend-section {
	margin: 40px 0;
	padding: 0 20px;

	.section-title {
		font-size: 24px;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 30px;
		padding-left: 12px;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 24px;
			background: #409eff;
			border-radius: 2px;
		}
	}
}

.recommend-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.image-container {
	position: relative;
	padding-top: 56.25%; // 16:9 比例
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.recommend-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	cursor: pointer;

	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

		.hover-overlay {
			opacity: 1;
		}

		.recommend-title {
			color: #409eff;
		}
	}
}

.hover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.recommend-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;

	&:hover {
		transform: scale(1.05);
	}
}

.recommend-title {
	padding: 16px;
	font-size: 15px;
	font-weight: 500;
	color: #333;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
	min-height: 72px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-container {
	padding: 40px 20px;
}

.image-error {
	width: 100%;
	height: 100%;
	background: #f5f7fa;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #909399;
	font-size: 14px;
}

@media (max-width: 768px) {
	.recommend-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.container {
		padding: 0 15px;
	}

	.recommend-section {
		margin: 30px 0;
		padding: 0;
	}
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding: 0 12px;
}
</style>
